{% extends 'classroom-manage/layout.html.twig' %}
{% block title %}{{'classroom.set_picture'|trans}} - {{ parent() }}{% endblock %}
{% set side_nav = 'picture' %}
{% do script(['app/js/classroom-manage/set-picture-crop/index.js']) %}

{% block main %}
<div class="panel panel-default panel-col">
  <div class="panel-heading">{{'classroom.set_picture'|trans}}</div>
  <div class="panel-body">

  <form id="classroom-picture-crop-form" method="post" enctype="multipart/form-data">

    <div class="form-group clearfix">
      <div class="col-md-offset-2 col-md-8 controls">
        <img class="img-responsive" src="{{ filepath(pictureUrl) }}" id="classroom-picture-crop" width="{{scaledSize.width}}" height="{{scaledSize.height}}" data-natural-width="{{ naturalSize.width }}" data-natural-height="{{ naturalSize.height }}" />
        <div class="help-block">{{'classroom.set_picture_tips'|trans}}</div>
      </div>
    </div>

    <div class="form-group clearfix">
      <div class="col-md-offset-2 col-md-8 controls">

        <a class="btn btn-fat btn-primary upload-picture-btn" id="upload-picture-btn" 
        data-url="{{path('classroom_manage_picture_crop', {id: classroom.id})}}"
        data-goto-url="{{path('classroom_manage_set_picture',{id: classroom.id})}}"
        >{{'form.btn.save'|trans}}</a>
        <a href="javascript:;" class="go-back btn btn-link">{{'classroom.again_select_picture'|trans}}</a>
      </div>
    </div>

  </form>

  </div>
</div>

{% endblock %}




